<template>
  <div>
    <!--搜索栏  操作按钮-->
    <Input  placeholder="Enter something..." v-model="keywords" style="width: 300px" >
      <Icon type="ios-search" slot="suffix"  @click="queryParams"/>
    </Input>
    <Button  icon="ios-add-circle-outline" type="primary" @click="showEditModal">新增</Button>
    <Button  icon="ios-trash-outline" type="primary" @click="deletes">删除</Button>
    <p></p>
    <Table border
           :columns="columns"
           :data="data"
           :current="pageNo"
           @on-select="checkTable"
           ref="selection"></Table>
    <Page
      :total="totalsize"
      :page-size="pageSize"
      size="small"
      @on-change="changePage"
      @on-page-size-change="pages"
      show-total  show-sizer />
    <!--弹出编辑页面-->
    <Modal v-model="editModal"
           :closable='true' :mask-closable=false
           width="600"
           @on-ok="saveEdit"
           @on-cancel="cancelEdit">
      <h3 slot="header" style="color:#2D8CF0">{{!user.id?'添加管理员':'修改管理员'}}</h3>
      <Form ref="editAdminForm"
            :model="user"
            :label-width="100"
            label-position="right"
            @submit.native.prevent="saveEdit">

        <FormItem  label="账号" prop="ukAccount">
          <Input v-model="user.name" placeholder="请输入管理员账号"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input v-model="user.password" type="password" placeholder="请输入管理员密码"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="rePassword">
          <Input v-model="user.rePassword" type="password" placeholder="请确认管理员密码"></Input>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="user.email" placeholder="请输入管理员邮箱"></Input>
        </FormItem>
        <FormItem label="状态" prop="status">
          <RadioGroup v-model="user.status">
            <Radio :label="1">启用</Radio>
            <Radio :label="0">禁用</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
    </Modal>
  </div>

</template>
<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        totalsize:0,
        keywords:"",
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center',
            key:'id'
          },
          {
            title:"账号",
            key: "name"
          },
          {
            title:"邮箱",
            key: "email"
          },
          {
            title:"状态",
            key: "status",
            render: (h, params) => {
              const row = params.row;
              const color = row.status === 1 ? 'green' : 'red';
              const text = row.status === 1 ? '已启用' : '已禁用';
              return h('Tag', {
                props: {
                  color: color
                }
              }, text);
            },
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              let editBtn = h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showEditModal(params);
                  }
                }
              }, '修改');
              let deleteBtn = h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deletes(params);
                  }
                }
              }, '删除');
              return h(
                'div', [editBtn, deleteBtn]
              );
            }
          }
        ],
        editModal:false,
        updateState:false,
        user:{
          rePassword:""
        },
        data: [],
        pageNo:0,
        pageSize:10,
        next:1
       }
    },
    created(){
      this.queryParams();
    },
    methods: {
      queryParams:function(){
        let that=this;
        let posDate={"pageNo":that.pageNo,"pageSize":that.pageSize,"keyword":that.keywords};
        that.$ajax.post('/api/user/queryPage',that.$qs.stringify(posDate)).then(function (data) {
          console.info(data);
          that.totalsize=data.data.object.totalCount;
          that.data=data.data.object.result;
        });
      },
      showEditModal:function(params){
        let that=this;
        if(typeof params.row!='undefined'){
          let users=params.row;
          console.info(users)
          that.user.id=users.id;
          that.user.name=users.name;
          that.user.email=users.email;
          that.user.password=users.password;
          that.user.status=users.status;
          that.updateState=true;
        }
        that.editModal=true;
      },
      saveEdit:function(){
        let that=this;
        if (that.updateState){
          this.$ajax.post("",
            this.$qs.stringify(that.user)
          ).then(function (data) {
            if(data.code==200){

            }
          })
        }else{
          this.$ajax.post(
            "",
            this.$qs.stringify(that.user)
          ).then(function (data) {
            if(data.code==200){

            }
          })
        }
      },
      cancelEdit:function(){
        this.editModal=false;
      },
      deletes:function (row) {
        
      },
      pages(num) { //修改每页显示条数时调用
        this.pageSize = num;
        this.changePage(1);
      },
      changePage(index) {
        //index当前页码
        this.next = (index - 1) * this.pageSize;
        let that = this;
        this.$ajax.post(
          '/api/user/queryPage',
          {
             'pageNo': that.next,
             'pageSize': that.pageSize,
              'keyword':that.keywords
           }
        ).then(function(data) {
            that.data = data.data.object.result;
        }).catch(function(error) {
        })
      },
      checkTable(selection){
        this.selection=selection;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
